<template>
  <div class="newly">
    <div class="forbid-height" v-if="pageShow == true" @click="forbidHit"></div>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-form-item label="商品名称" prop="name" class="form-item">
        <el-input v-model="ruleForm.name" placeholder="请输入商品名称" clearable></el-input>
      </el-form-item>

      <el-form-item label="商品分类" prop="cascader" class="form-item">
        <el-cascader v-model="ruleForm.cascader" :options="commonCascaderOptions" :props="propsCascader" clearable
          @expand-change="commonCascaderChange"></el-cascader>
      </el-form-item>

      <el-form-item label="缴纳保证金金额" prop="bail" class="form-item">
        <el-input v-model="ruleForm.bail" placeholder="请输入缴纳保证金金额" clearable></el-input>
      </el-form-item>

      <el-form-item label="申请资质" prop="goodicon" class="form-banner">
        <div class="banners">
          <el-upload action="https://api-qingchuang.xmw1688.com/common/upload" :show-file-list="false"
            :on-success="handleAvatarSuccessCover" class="img">
            <div class="img">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </el-upload>

          <div class="imgs" v-if="ruleForm.goodicon != '' && ruleForm.goodicon != null">
            <el-image :src="ruleForm.goodicon" :preview-src-list="srcList0"></el-image>

            <i class="el-icon-delete" style="
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 20px;
                cursor: pointer;
                color: red;
              " @click="handleRemoveCover"></i>
          </div>
        </div>

        <div class="text">限制上传一张</div>
      </el-form-item>

      <el-form-item label="商品轮播图" prop="banner" class="form-banner">
        <div class="banners">
          <el-upload action="https://api-qingchuang.xmw1688.com/common/upload" :show-file-list="false"
            :on-success="handleAvatarSuccess" class="img" :limit="6">
            <div class="img">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </el-upload>

          <div class="imgs" v-for="(item, index) in ruleForm.banner" :key="index">
            <el-image :src="item" :preview-src-list="srcList1"></el-image>

            <i class="el-icon-delete" style="
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 20px;
                cursor: pointer;
                color: red;
              " @click="handleRemove(index)"></i>
          </div>
        </div>
        <div class="text">
          最多可上传6张，图片将在商品详情页轮播展示
        </div>
      </el-form-item>

      <el-form-item v-if="id" label="商品属性" :prop="tableData.length > 0 ? '' : 'stockValue'" class="form-stock">
        <div class="stock">
          <el-input style="width: 320px" v-model="ruleForm.stockValue" placeholder="请输入商品属性" clearable></el-input>
          <div class="adds" @click.stop="addsHit">+ 添加属性</div>
        </div>

        <div class="table">
          <el-table :data="tableData" border :header-cell-style="{
            color: '#333333',
            backgroundColor: '#f3f3f3',
            padding: 0,
          }">
            <el-table-column prop="goodPropertyName" label="商品属性名称" width="300">
            </el-table-column>

            <el-table-column prop="" label="商品子属性名称">
              <template slot-scope="scope">
                <div class="parallel">
                  <div class="tags" v-for="(item, index) in scope.row.goodPropertyTwoList" :key="index">
                    <el-tag closable @close="tagsClose(item)">
                      {{ item.goodPropertyName }}
                    </el-tag>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <div class="operation">
                  <div class="list" @click.prevent="subAttribute(scope.row)">
                    添加子属性
                  </div>

                  <div class="list" @click.prevent="deleteHit(scope.row)">
                    删除
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="table">
          <el-table :data="tableSkuData" border :header-cell-style="{
            color: '#333333',
            backgroundColor: '#f3f3f3',
            padding: 0,
          }">
            <!-- <el-table-column prop="goodPropertyOneName" label="商品规格名称" width="200">
            </el-table-column> -->

            <el-table-column prop="" label="商品子规格">
              <template slot-scope="scope">
                <div class="parallel">
                  <el-tag v-if="scope.row.goodStockProperty != null">
                    {{ scope.row.goodStockProperty }}
                  </el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="" label="图片">
              <template slot-scope="scope">
                <img class="imgs" :src="scope.row.goodStockImage" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="costPrice" label="*成本价">
            </el-table-column>

            <el-table-column prop="lineationPrice" label="*划线价">
            </el-table-column>

            <el-table-column prop="retailPrice" label="*销售价">
            </el-table-column>

            <el-table-column prop="inventoryNum" label="*库存">
            </el-table-column>

            <el-table-column prop="weight" label="*重量（克）">
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <div class="operation">
                  <div class="list" @click.prevent="skuHit(scope.row)">
                    {{ scope.row.disabled == false ? "保存" : "编辑" }}
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>

      <el-form-item label="虚拟销售" prop="virtual" class="form-virtual">
        <el-input v-model="ruleForm.virtual" placeholder="请输入内容" clearable></el-input>

        <div class="title">
          虚拟销售加上各SKU的真实销量为商品展示在前台的销量
        </div>
      </el-form-item>

      <el-form-item label="邮费" :prop="ruleForm.exempt == false ? 'postage' : ''" class="form-virtual"
        style="display: flex">
        <el-select v-model="ruleForm.postage" clearable placeholder="请选择" :disabled="ruleForm.exempt">
          <el-option v-for="item in postagegoodList" :key="item.goodPostageId" :label="item.goodPostageName"
            :value="item.goodPostageId">
          </el-option>
        </el-select>

        <div class="title">
          <el-checkbox v-model="ruleForm.exempt">免邮费</el-checkbox>
        </div>
      </el-form-item>

      <el-form-item label="商品详情" prop="step" class="form-editor">
        <wang-edit ref="wangEditorRef" v-if="editShow" :editorParams="editorParams" />
      </el-form-item>

      <el-form-item v-if="pageShow == false">
        <div class="form-button">
          <div class="list" @click="addClose('ruleForm')">取消</div>
          <div class="list" @click="addSave('ruleForm')">保存</div>
          <!-- <div class="list" @click="addEditSave('ruleForm')">保存并编辑</div> -->
          <!-- <div class="list" @click="addStatusSave('ruleForm')">保存并上架</div> -->
        </div>
      </el-form-item>
    </el-form>

    <!--新增或者编辑-->
    <div class="add">
      <el-dialog title="新增" :visible.sync="addPropertyVisible" :before-close="addPropertyClose" width="25%">
        <div class="add-form">
          <el-form :model="addruleForm" :rules="addrules" ref="ruleForm" label-width="120px">
            <el-form-item label="商品子属性" prop="name" class="form-item">
              <el-input v-model="addruleForm.name" placeholder="请输入商品子属性" clearable></el-input>
            </el-form-item>

            <el-form-item class="attachment">
              <div class="list" @click="addPropertyClose">取消</div>
              <div class="list" @click="addPropertyConfirm('ruleForm')">
                保存
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>

    <!--新增或者编辑规格-->
    <div class="add">
      <el-dialog title="编辑" :visible.sync="addskuVisible" :before-close="addskuClose" width="30%">
        <div class="add-form">
          <el-form :model="ruleskuForm" :rules="rulesku" ref="ruleForm" label-width="130px" class="demo-ruleForm">
            <el-form-item label="规格商品图标" prop="icon">
              <el-upload action="https://api-qingchuang.xmw1688.com/common/upload" :show-file-list="false"
                :on-success="handleAvatarSuccessku">
                <div class="img">
                  <img v-if="ruleskuForm.icon" :src="ruleskuForm.icon" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </div>
              </el-upload>
            </el-form-item>

            <el-form-item label="成本价" prop="costPrice">
              <el-input v-model="ruleskuForm.costPrice" placeholder="请输入成本价" clearable></el-input>
            </el-form-item>

            <el-form-item label="划线价" prop="lineationPrice">
              <el-input v-model="ruleskuForm.lineationPrice" placeholder="请输入划线价" clearable></el-input>
            </el-form-item>

            <el-form-item label="销售价" prop="retailPrice">
              <el-input v-model="ruleskuForm.retailPrice" placeholder="请输入销售价" clearable></el-input>
            </el-form-item>

            <el-form-item label="库存" prop="inventoryNum">
              <el-input v-model="ruleskuForm.inventoryNum" placeholder="请输入库存" clearable></el-input>
            </el-form-item>

            <el-form-item label="重量（克）" prop="weight">
              <el-input v-model="ruleskuForm.weight" placeholder="请输入库存" clearable></el-input>
            </el-form-item>

            <el-form-item label="是否启用" prop="isStatus">
              <!-- <el-input
         
                placeholder="请输入库存"
                clearable
              ></el-input> -->
              <el-select v-model="ruleskuForm.isStatus" placeholder="请选择" style="width: 100%">
                <el-option label="否" :value="0"> </el-option>
                <el-option label="是" :value="1"> </el-option>
              </el-select>
            </el-form-item>

            <el-form-item class="attachment1">
              <div class="list" @click="addskuClose">取消</div>
              <div class="list" @click="addskuConfirm('ruleForm')">保存</div>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>

    <div class="delete">
      <el-dialog title="删除" :visible.sync="deleteVisible" :before-close="deleteClose">
        <div class="delete-title">是否确认删除？</div>
        <div class="delete-attachment">
          <div class="list" @click="deleteClose">取消</div>
          <div class="list" @click="deleteConfirm">确定</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import WangEdit from "@/components/wangEditor/RichTextEditor.vue";

import {
  saveCommodityClassifyList,
  saveCommodityListId,
  saveCommodityListIdAdd,
  savePostagegoodList,
  //---------
  saveCommodityListIdPropertyAdd,
  saveCommodityListIdPropertyDelete,
  saveCommodityListIdStockAdd,
} from "@/api/save";

export default {
  components: {
    WangEdit,
  },
  data() {
    return {
      id: "",
      pageShow: false, // 是否可修改
      loading: false,
      //---------
      ruleForm: {
        name: "",
        cascader: "",
        banner: [],
        stockValue: "",
        virtual: "",
        postage: "",
        step: "",
        goodicon: "",
        //-------
        bail: "",
        exempt: false,
      },
      rules: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        bail: [
          { required: true, message: "请输入缴纳保证金", trigger: "blur" },
        ],
        cascader: [
          { required: true, message: "请选择商品分类", trigger: "blur" },
        ],
        goodicon: [
          {
            required: true,
            message: "请上传商品封面",
            trigger: "blur",
          },
        ],
        banner: [
          {
            required: true,
            message: "请选择商品轮播图或者商品",
            trigger: "blur",
          },
        ],
        stockValue: [
          {
            required: true,
            message: "请输入商品属性",
            trigger: "blur",
          },
        ],

        virtual: [
          {
            required: true,
            message: "请输入虚拟销量",
            trigger: "blur",
          },
        ],
        postage: [
          {
            required: true,
            message: "请输入邮费",
            trigger: "blur",
          },
        ],
        step: [{ required: true, message: "请输入商品详情", trigger: "blur" }],
      },
      //----------------
      commonCascaderOptions: [],
      propsCascader: {
        value: "goodClassifyId",
        label: "goodClassifyName",
        children: "children",
        checkStrictly: true,
      },
      //--------模拟
      commonObj: {},
      srcList1: [],
      stockSecondList: [],
      srcList0: [],

      //-----------
      editShow: false,
      editorParams: {
        content: "", // 富文本内容
        placeholder: "请填写内容", // 富文本占位内容
        uploadImageUrl: "/file", // 富文本上传图片的地址
        height: "400px", // 富文本最小高度
        isDisabled: false, // 富文本是否禁用
      },
      //-------------
      addPropertyVisible: false,
      addPropertyObj: {},
      addruleForm: {
        name: "",
      },
      addrules: {
        name: [{ required: true, message: "请输入规格属性", trigger: "blur" }],
      },
      tableData: [],
      tableSkuData: [],
      //--------------------------------
      postagegoodList: [],
      //--------------
      addskuVisible: false,
      skuObj: {},
      ruleskuForm: {
        icon: "",
        costPrice: "",
        lineationPrice: "",
        retailPrice: "",
        inventoryNum: "",
        isStatus: "",
        //--------
        weight: "",
      },
      rulesku: {
        icon: [{ required: true, message: "请上传商品封面", trigger: "blur" }],
        costPrice: [
          { required: true, message: "请输入成本价", trigger: "blur" },
        ],
        lineationPrice: [
          { required: true, message: "请输入划线价", trigger: "blur" },
        ],
        retailPrice: [
          { required: true, message: "请输入销售价", trigger: "blur" },
        ],
        inventoryNum: [
          { required: true, message: "请输入库存", trigger: "blur" },
        ],
        weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
        ],
        isStatus: [{ required: true, message: "是否启用", trigger: "blur" }],
      },
      //-----------
      deleteVisible: false,
      deleteObj: {}
    };
  },
  created() {
    this.pageShow = this.$route.query.soucre == 1 ? true : false;

    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.saveCommodityListIdMet();
    }

    this.saveCommodityClassifyListMet();

    this.savePostagegoodListMet();
  },
  mounted() {
    this.editShow = true;
  },
  methods: {
    savePostagegoodListMet() {
      let params = {
        goodPostageName: "",
        pageSize: 100000,
        pageNo: this.page,
      };

      savePostagegoodList(params).then((res) => {
        if (res.errorCode == null) {
          this.postagegoodList = res.resultData.goodPostageList;
        }
      });
    },
    //---------------------
    // 加载一级数据
    saveCommodityClassifyListMet() {
      let params = {
        goodClassifyType: 0,
        fatherId: "",
        pageSize: 10000,
        pageNo: 1,
      };

      saveCommodityClassifyList(params).then((res) => {
        if (res.errorCode == null) {
          res.resultData.goodClassifyList.forEach((item, index) => {
            item.children = [];
          });
          this.commonCascaderOptions = res.resultData.goodClassifyList;
        }
      });
    },
    commonCascaderChange(e) {
      this.loadCascaderData(e[0]);
    },
    // 动态加载级联数据

    loadCascaderData(id) {
      let params = {
        goodClassifyType: 0,
        fatherId: id,
      };

      saveCommodityClassifyList(params).then((res) => {
        if (res.errorCode == null) {
          let mockData = res.resultData.goodClassifyList;

          if (mockData.length > 0) {
            this.commonCascaderOptions.forEach((item, index) => {
              if (item.goodClassifyId == id) {
                item.children = mockData;
              }
            });
          } else {
            console.log("当前勾选", this.commonCascaderOptions);
            let num = 0;
            this.commonCascaderOptions.forEach((item, index) => {
              if (item.goodClassifyId == id) {
                num = id;
              }
            });

            this.ruleForm.cascader = [num];
          }
        }
      });
    },

    //----------------------
    forbidHit() {
      this.$message.error("当前详情页，禁止修改");
    },
    saveCommodityListIdMet() {
      let params = this.id;

      saveCommodityListId(params).then((res) => {
        if (res.errorCode == null) {
          this.commonObj = res.resultData;
          //----------------
          this.ruleForm.name = res.resultData.goodName;
          this.loadCascaderData(res.resultData.goodOneClassifyId);

          if (
            res.resultData.goodOneClassifyId != null &&
            res.resultData.goodTwoClassifyId != null
          ) {
            let list = [];
            list.push(
              res.resultData.goodOneClassifyId,
              res.resultData.goodTwoClassifyId
            );
            this.ruleForm.cascader = list;
          } else if (res.resultData.goodTwoClassifyId == null) {
            let list = [];
            list.push(res.resultData.goodOneClassifyId);
            this.ruleForm.cascader = list;
          } else {
            let list = [];
            list.push(res.resultData.goodOneClassifyId);
            this.ruleForm.cascader = list;
          }



          this.ruleForm.banner = res.resultData.goodImage.split(";");
          this.ruleForm.virtual = res.resultData.purchaseNum;
          this.ruleForm.postage = res.resultData.goodPostageId;
          this.ruleForm.goodicon = res.resultData.goodIcon;

            this.ruleForm.exempt = res.resultData.goodPostageId == null ? true : false

          this.editorParams.content =
            res.resultData.goodDetail == null ? "" : res.resultData.goodDetail;

          this.tableData = res.resultData.goodPropertyOneList;

          if (res.resultData.goodStockList.length > 0) {
            res.resultData.goodStockList.forEach((item, index) => {
              item.costPrice = Number(item.costPrice / 100);
              item.lineationPrice = Number(item.lineationPrice / 100);
              item.retailPrice = Number(item.retailPrice / 100);
              item.disabled = true;
            });
          }
          this.tableSkuData = res.resultData.goodStockList;
        }
      });
    },

    //-----------------------------------------------------
    addsHit() {
      let params = {
        goodId: this.id,
        fatherId: null,
        goodPropertyId: "",
        goodPropertyName: this.ruleForm.stockValue,
      };
      saveCommodityListIdPropertyAdd(params).then((res) => {
        if (res.errorCode == null) {
          this.commonObj = res.resultData;
          this.tableData = res.resultData.goodPropertyOneList;

          if (res.resultData.goodStockList.length > 0) {
            res.resultData.goodStockList.forEach((item, index) => {
              item.costPrice = Number(item.costPrice / 100);
              item.lineationPrice = Number(item.lineationPrice / 100);
              item.retailPrice = Number(item.retailPrice / 100);
              item.disabled = true;
            });
          }
          this.tableSkuData = res.resultData.goodStockList;
        }
      });
    },
    subAttribute(item) {
      this.addPropertyObj = item;
      this.addPropertyVisible = true;
    },
    addPropertyClose() {
      this.addruleForm.name = "";
      this.addPropertyVisible = false;
    },
    addPropertyConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            goodId: this.id,
            fatherId: this.addPropertyObj.goodPropertyId,
            goodPropertyId: "",
            goodPropertyName: this.addruleForm.name,
          };
          saveCommodityListIdPropertyAdd(params).then((res) => {
            if (res.errorCode == null) {
              this.commonObj = res.resultData;
              this.tableData = res.resultData.goodPropertyOneList;

              if (res.resultData.goodStockList.length > 0) {
                res.resultData.goodStockList.forEach((item, index) => {
                  item.costPrice = Number(item.costPrice / 100);
                  item.lineationPrice = Number(item.lineationPrice / 100);
                  item.retailPrice = Number(item.retailPrice / 100);
                  item.disabled = true;
                });
              }
              this.tableSkuData = res.resultData.goodStockList;
            }
          });

          this.addPropertyVisible = false;
        } else {
          return false;
        }
      });
    },
    tagsClose(item) {
      let params = item.goodPropertyId;

      saveCommodityListIdPropertyDelete(params).then((res) => {
        if (res.errorCode == null) {
          this.$message.success("属性删除成功！");
          this.commonObj = res.resultData;
          this.tableData = res.resultData.goodPropertyOneList;

          if (res.resultData.goodStockList.length > 0) {
            res.resultData.goodStockList.forEach((item, index) => {
              item.costPrice = Number(item.costPrice / 100);
              item.lineationPrice = Number(item.lineationPrice / 100);
              item.retailPrice = Number(item.retailPrice / 100);
              item.disabled = true;
            });
          }

          this.tableSkuData = res.resultData.goodStockList;
        }
      });
    },

    //----
    skuHit(item) {
      this.skuObj = item;

      this.ruleskuForm.icon = item.goodStockImage;
      this.ruleskuForm.costPrice = item.costPrice;
      this.ruleskuForm.lineationPrice = item.lineationPrice;
      this.ruleskuForm.retailPrice = item.retailPrice;
      this.ruleskuForm.inventoryNum = item.inventoryNum;
      this.ruleskuForm.isStatus = item.isStatus;
      this.ruleskuForm.weight = item.weight;

      this.addskuVisible = true;
    },
    addskuClose() {
      this.addskuVisible = false;
    },
    addskuConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            goodStockId: this.skuObj.goodStockId,
            goodStockImage: this.ruleskuForm.icon,
            costPrice: Number(this.ruleskuForm.costPrice * 100),
            lineationPrice: Number(this.ruleskuForm.lineationPrice * 100),
            retailPrice: Number(this.ruleskuForm.retailPrice * 100),
            inventoryNum: Number(this.ruleskuForm.inventoryNum),
            isStatus: this.ruleskuForm.isStatus,
            //---------
            weight: this.ruleskuForm.weight,
          };

          saveCommodityListIdStockAdd(params).then((res) => {
            if (res.errorCode == null) {
              this.commonObj = res.resultData;
              this.tableData = res.resultData.goodPropertyOneList;

              if (res.resultData.goodStockList.length > 0) {
                res.resultData.goodStockList.forEach((item, index) => {
                  item.costPrice = Number(item.costPrice / 100);
                  item.lineationPrice = Number(item.lineationPrice / 100);
                  item.retailPrice = Number(item.retailPrice / 100);

                  item.disabled = true;
                });
              }
              this.tableSkuData = res.resultData.goodStockList;
            }
          });

          this.addskuVisible = false;
        } else {
          return false;
        }
      });
    },
    handleAvatarSuccessku(res, file) {
      this.ruleskuForm.icon = res.resultData;
    },

    //---------上传
    handleAvatarSuccessCover(res, file) {
      this.ruleForm.goodicon = res.resultData;
      this.srcList0 = [res.resultData];
    },

    handleRemoveCover() {
      this.ruleForm.goodicon = "";
    },

    //------------
    handleChange(value) {
      console.log(value);
    },
    //---------上传
    handleAvatarSuccess(res, file) {
      if (this.ruleForm.banner.length < 6) {
        this.ruleForm.banner.push(res.resultData);

        this.srcList1 = this.ruleForm.banner;
      } else {
        this.$message.error(
          "最多可上传9张，图片将在商品详情页轮播展示！"
        );
      }
    },
    handleRemove(index) {
      if (this.pageShow == true) {
        this.forbidHit();
        return;
      }

      this.ruleForm.banner.splice(index, 1);
    },
    //-----------------------

    setHtml(html) {
      // 回显富文本框中内容
      let _this = this;
      this.$nextTick(() => {
        // 此处用来解决富文本编辑器未完全加载的问题
        setTimeout(() => {
          _this.$refs.wangEditorRef.setEditorHtml(html);
        }, 200);
      });
    },
    getHtml() {
      this.$refs.wangEditorRef.getEditorHtml();
    },

    //-------------------------------------------------------------
    addSave(formName) {
      this.ruleForm.step =
        this.$refs.wangEditorRef.getEditorHtml() == "<p><br></p>"
          ? ""
          : this.$refs.wangEditorRef.getEditorHtml();

      //----------------
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let banners = "";
          if (this.ruleForm.banner.length > 0) {
            banners = this.ruleForm.banner.join(";");
          } else {
            banners = "";
          }

          let params = {
            goodId: this.id,
            goodName: this.ruleForm.name,
            goodOneClassifyId: this.ruleForm.cascader[0],
            goodTwoClassifyId: this.ruleForm.cascader[1],
            goodClassifyActivityId: "",
            //---------------
            goodIcon: this.ruleForm.goodicon,
            goodImage: banners,
            purchaseNum: this.ruleForm.virtual,
            goodPostageId: (this.ruleForm.exempt = false
              ? this.ruleForm.postage
              : ""),
            goodDetail: this.ruleForm.step,
            isStatus: 0,
            //------------
            goodPropertyOneList: this.tableData,
            goodStockList: this.tableSkuData,
          };

          saveCommodityListIdAdd(params).then((res) => {
            if (res.errorCode == null) {
              if (this.id == "") {
                this.$message.success("新增商品成功！");
              } else {
                this.$message.success("修改商品成功！");
              }

              setTimeout(() => {
                this.$router.push({
                  path: "/save/commodity/commodity-list",
                });
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    addEditSave(formName) {
      this.ruleForm.step =
        this.$refs.wangEditorRef.getEditorHtml() == "<p><br></p>"
          ? ""
          : this.$refs.wangEditorRef.getEditorHtml();

      //----------------
      this.$refs[formName].validate((valid) => {
        if (valid) {
        } else {
          return false;
        }
      });
    },
    addStatusSave(formName) {
      this.ruleForm.step =
        this.$refs.wangEditorRef.getEditorHtml() == "<p><br></p>"
          ? ""
          : this.$refs.wangEditorRef.getEditorHtml();

      //----------------
      this.$refs[formName].validate((valid) => {
        if (valid) {
        } else {
          return false;
        }
      });
    },
    addClose(formName) {
      this.$router.push({
        path: "/save/commodity/commodity-list",
      });

      this.$refs[formName].resetFields();
    },
    //---------------------------
    //---------
    deleteHit(item) {
      this.deleteObj = item;
      this.deleteVisible = true;
    },
    deleteClose() {
      this.deleteVisible = false;
    },
    deleteConfirm() {
      let params = this.deleteObj.goodPropertyId;

      saveCommodityListIdPropertyDelete(params).then((res) => {
        if (res.errorCode == null) {
          this.$message.success("属性删除成功！");
          this.commonObj = res.resultData;
          this.tableData = res.resultData.goodPropertyOneList;

          if (res.resultData.goodStockList.length > 0) {
            res.resultData.goodStockList.forEach((item, index) => {
              item.costPrice = Number(item.costPrice / 100);
              item.lineationPrice = Number(item.lineationPrice / 100);
              item.retailPrice = Number(item.retailPrice / 100);
              item.disabled = true;
            });
          }

          this.tableSkuData = res.resultData.goodStockList;
          this.deleteVisible = false
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/common.less");
@import url("@/assets/css/delete.less");

.newly {
  position: relative;

  .forbid-height {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    display: flex;
  }

  .demo-ruleForm {
    /deep/ .el-form-item__content {
      width: 64%;
      margin-left: 0 !important;
    }


    .form-item {
      width: 500px;
      display: flex;

      /deep/ .el-cascader {
        width: 100%;
      }

      /deep/ .el-select {
        width: 100%;
      }
    }

    .form-banner {
      .banners {
        /deep/ .el-form-item__content {
          display: flex;
        }

        display: flex;

        .img {
          width: 100px;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #ccc;
          border-radius: 5px;
        }

        .imgs {
          width: 100px;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #ccc;
          margin-left: 10px;
          border-radius: 5px;
          position: relative;
        }
      }

      .text {
        color: #999;
        margin-left: 140px;
      }

      /deep/ .el-form-item__error {
        margin-left: 140px;
      }
    }

    .form-stock {
      /deep/ .el-form-item__content {
        width: 100%;
        margin-left: 0 !important;
      }

      /deep/ .el-form-item__error {
        margin-left: 140px;
      }

      .stock {
        width: 70%;
        display: flex;

        .adds {
          cursor: pointer;
          margin-left: 20px;
          height: 38px;
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px dashed #ccc;
          color: #999;
        }
      }

      .array {
        width: 70%;
        margin-top: 10px;
        margin-left: 140px;

        .list {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          .title {
            min-width: 120px;
            height: 35px;
            width: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ccc;
            color: rgba(0, 0, 0, 0.5);
          }

          .parallel {
            margin-left: 20px;
            padding: 10px 10px 0;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            border: 1px dashed #ccc;

            .parallel-list {
              min-width: 120px;
              height: 35px;
              width: 120px;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 1px solid #ccc;
              margin-right: 10px;
              margin-bottom: 10px;
              color: rgba(0, 0, 0, 0.5);
            }

            .nature {
              cursor: pointer;
              color: #2a82e4;
              border: 1px dashed #2a82e4;
            }
          }
        }
      }

      .table {
        margin-top: 10px;
        margin-left: 140px;
        width: 90%;

        .parallel {
          display: flex;
          flex-wrap: wrap;

          .tags {
            margin-right: 10px;
            height: 40px;
            display: flex;
            align-items: center;
          }
        }
      }
    }

    .form-virtual {
      /deep/ .el-form-item__content {
        display: flex;
      }

      /deep/ .el-input {
        width: 320px;
      }

      .title {
        margin-left: 20px;
        color: #999;
      }
    }

    .form-editor {
      /deep/ .el-form-item__content {
        width: 64%;
        margin-left: 140px !important;
      }

      margin-top: 40px;
      width: 70%;
    }

    .form-button {
      margin-left: 140px;
      display: flex;
      align-items: center;

      /deep/ .el-form-item__content {
        line-height: 0;
      }

      .list {
        background: #3da8f5;
        color: #fff;
        font-size: 16px;
        margin-right: 20px;
        border-radius: 5px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0 20px;
        box-sizing: border-box;
      }

      .list:first-child {
        background: #808080;
      }
    }
  }

  .add {
    /deep/ .el-form-item__content {
      display: flex;
      margin-left: 0 !important;
    }

    /deep/ .el-dialog__header {
      font-size: 16px;
      text-align: center;
    }

    /deep/ .el-dialog__body {
      padding-bottom: 10px;
    }

    .img {
      width: 124px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #ccc;
      border-radius: 5px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }
    }

    .add-form {

      .attachment,
      .attachment1 {
        margin-top: 50px;

        /deep/ .el-form-item {
          margin-bottom: 0;
        }

        /deep/ .el-form-item__content {
          margin-left: 0 !important;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .list {
          background: #3da8f5;
          color: #fff;
          font-size: 16px;
          margin-right: 50px;
          border-radius: 5px;
          width: 100px;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        .list:first-child {
          background: #808080;
        }

        .list:last-child {
          margin-right: 0;
        }
      }

      .attachment1 {
        /deep/ .el-form-item__content {
          width: 100%;
        }
      }
    }
  }
}
</style>